<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<style>
  .record-space {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
  }

  .user-card {
    width: 100%;
    height: 120px;
    background-color: white;
    display: flex;
    align-items: center;
    border-radius: 10px;
  }

  .user-card .avatar {
    width: 60px;
    border-radius: 50%;
    margin-left: 40px;
  }

  .user-card .nickname {
    margin-left: 20px;
    font-size: 24px;
    font-weight: bolder;
  }

  .record-card {
    width: calc(25% - 50px);
    height: 150px;
    background-color: white;
    display: flex;
    flex-direction: column;
    position: relative;
    border-radius: 10px;
    padding: 0 20px;
  }

  .record-card .title {
    height: 30%;
    display: flex;
    align-items: center;
    font-weight: bolder;
  }

  .record-card .detail {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    font-weight: bolder;

    .des {
      font-size: 16px;
      font-weight: normal;
    }
  }

  .record-width-card {
    width: calc(50% - 60px);
    height: 150px;
    background-color: white;
    display: flex;
    flex-direction: column;
    position: relative;
    border-radius: 10px;
    padding: 0 20px;
  }

  .record-width-card .title {
    height: 30%;
    display: flex;
    align-items: center;
    font-weight: bolder;
    margin-bottom: 14px;
  }

  .record-width-card .detail {
    display: flex;
    flex-wrap: wrap;
  }

  .detail-item {
    width: 100px;

    .num {
      font-size: 24px;
      font-weight: bolder;
      margin-bottom: 10px;
    }

    .num span {
      font-size: 16px;
      font-weight: normal;
    }

    .text {
      font-size: 16px;
      color: #6c6a6a;
    }
  }
</style>

<div class="record-space">
  <div class="user-card">
    <img class="avatar" src="${user_key.avatar}" alt="个人头像">
    <span class="nickname">${user_key.nickname}</span>
  </div>
  <div class="record-width-card" id="task">
    <div class="title">
      资料任务点
    </div>
    <div class="detail">
      <div class="detail-item">
        <div class="num">1
          <span>名</span>
        </div>
        <span class="text">当前排名</span>
      </div>
      <div class="detail-item">
        <div class="num">0
          <span>个</span>
        </div>
        <span class="text">完成进度</span>
      </div>
    </div>
  </div>
  <div class="record-card" id="score">
    <div class="title">
      课程积分
    </div>
    <div class="detail">
      ${user_key.score}
      <span class="des"> 分
      </span>
    </div>
  </div>
  <div class="record-card" id="material">
    <div class="title">
      资料学习次数
    </div>
    <div class="detail">
      0
      <span class="des"> 次
      </span>
    </div>
  </div>
  <div class="record-width-card" id="comment">
    <div class="title">
      评论
    </div>
    <div class="detail">
      <div class="detail-item">
        <div class="num">1
          <span>条</span>
        </div>
        <span class="text">评论数量</span>
      </div>
      <div class="detail-item">
        <div class="num">0
          <span>个</span>
        </div>
        <span class="text">获赞数</span>
      </div>
    </div>
  </div>
  <div class="record-card" id="exam">
    <div class="title">
      考试次数
    </div>
    <div class="detail">
      0
      <span class="des"> 次
      </span>
    </div>
  </div>
</div>

